<script setup lang="ts">
import { useCategoryStore } from "@/stores/CategoryStore";
import { onBeforeRouteUpdate } from "vue-router";
import type { GoodsRequestParams } from "@/types/Goods";
import omitBy from "lodash/omitBy";
import transform from "lodash/transform";
// 获取存储分类状态的 store 对象
const categoryStore = useCategoryStore();
// 获取路由信息对象
const route = useRoute();
//获取筛选条件状态
const { SubCategoryFilters } = storeToRefs(categoryStore);
//获取请求筛选条件的方法
const { getSubCategoryFilters } = categoryStore;
//获取筛选条件
getSubCategoryFilters(route.params.sub as string);
//路由切换前
onBeforeRouteUpdate((to) => {
  getSubCategoryFilters(to.params.sub as string);
});

// 父组件需要的商品请求的参数的类型
type FilterParams = Partial<Pick<GoodsRequestParams, "brandId" | "attrs">>;

// 定义当前组件要触发的自定义事件
const emit = defineEmits<{
  (e: "onChanged", params: FilterParams): void;
}>();

// 用户选择筛选条件时使用的类型
interface SelectedFilters {
  brandId: string;
  [groupName: string]: string;
}
// 用于存储用户选择的筛选条件
// 由于所有的筛选条件都是可选的, 所以此处使用了 Partial
const selectedFilters = ref<Partial<SelectedFilters>>({});

// 更新筛选条件
function onSelectedFiltersChanged(filters: Partial<SelectedFilters>) {
  // 更新筛选条件状态
  selectedFilters.value = { ...selectedFilters.value, ...filters };

  console.log(selectedFilters.value);
  // 重构筛选条件
  const params = transform(
    // 清除属性值为空字符串的属性
    omitBy(selectedFilters.value, (value) => value === undefined),
    // 对筛选条件进行重构
    (result: FilterParams, value, key) => {
      // 如果属性是品牌ID
      if (key === "brandId") {
        // 存储品牌ID
        result[key] = value!;
      } else {
        // 否则属性是其他的筛选条件
        // 判断 attrs 数组是否存在, 如果不存在, 创建它
        if (typeof result.attrs === "undefined") result.attrs = [];
        // 存储筛选条件类别的名字和具体的筛选条件名字
        result.attrs.push({
          groupName: key,
          propertyName: value!,
        });
      }
    },
    {}
  );
  // 将用户选择的筛选条件传递到父父组件以备使用
  emit("onChanged", params);
}
// 当路由发生变化时
onBeforeRouteUpdate(() => {
  // 重置用户选择的筛选条件
  selectedFilters.value = {};
});
</script>
<template>
  <div
    class="sub-filter"
    v-if="categoryStore.SubCategoryFilters.status === 'loading'"
  >
    <XtxSkeleton class="item" width="800px" height="25px" />
    <XtxSkeleton class="item" width="800px" height="25px" />
    <XtxSkeleton class="item" width="800px" height="25px" />
    <XtxSkeleton class="item" width="800px" height="25px" />
    <XtxSkeleton class="item" width="800px" height="25px" />
  </div>

  <div class="sub-filter" v-else>
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a
          :class="{ active: selectedFilters.brandId === undefined }"
          href="javascript:"
          @click="onSelectedFiltersChanged({ brandId: undefined })"
          >全部</a
        >
        <a
          href="javascript:"
          v-for="brand in SubCategoryFilters.result[route.params.sub as string]?.brands"
          :key="brand.id"
          @click="onSelectedFiltersChanged({ brandId: brand.id })"
          :class="{ active: selectedFilters.brandId === brand.id }"
          >{{ brand.name }}</a
        >
      </div>
    </div>
    <div
      class="item"
      v-for="saleProperty in SubCategoryFilters.result[route.params.sub as string]?.saleProperties"
      :key="saleProperty.id"
    >
      <div class="head">{{ saleProperty.name }}:</div>
      <div class="body">
        <a
          :class="{ active: selectedFilters[saleProperty.name] === undefined }"
          href="javascript:"
          @click="onSelectedFiltersChanged({ [saleProperty.name]: undefined })"
          >全部</a
        >
        <a
          href="javascript:"
          v-for="property in saleProperty.properties"
          :key="property.id"
          @click="
            onSelectedFiltersChanged({ [saleProperty.name]: property.name })
          "
          :class="{
            active: selectedFilters[saleProperty.name] === property.name,
          }"
        >
          {{ property.name }}
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.xtx-skeleton {
  margin: 10px 0;
}
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
